<template>
  <view class="mxp-calendar-month">
    <view v-if="showMonth && foldStatus" class="calendar-month-bg">
      <text class="bg-text">{{ month }}</text>
    </view>
    <!-- 月或周日历 -->
    <view v-for="(item, index1) in monthViewData" :key="index1" class="item-weeks-view">
      <view v-for="(dayData, index2) in item" :key="index2" class="item-day-view">
        <mxp-calendar-day
          :dayData="dayData"
          :dayHeight="dayHeight"
          :selectedDayData="selectedDayData"
          :selected="selected"
          :badgeOptions="badgeOptions"
          :lunar="lunar"
          :themeColor="themeColor"
          :dayColor="dayColor"
          :daySize="daySize"
          :dayBold="dayBold"
          :lunarColor="lunarColor"
          :lunarSize="lunarSize"
          :startText="startText"
          :endText="endText"
          @change="choiceDate"
        ></mxp-calendar-day>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import type { PropType } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import type { $NewDate } from '../../util';
  import type { $BadgeProps } from '@/mxp-ui/mxp-badge/mxp-badge.vue';
  import type { $CalendarViewSelected } from '../../mxp-calendar-view.vue';
  import MxpCalendarDay from '../mxp-calendar-day/mxp-calendar-day.vue';
  defineOptions({
    name: 'mxp-calendar-month',
  });

  defineProps({
    /** 每一天高度 */
    dayHeight: { type: String as PropType<$SizeUnitStr>, default: '60px' },
    /** 徽标的配置  */
    badgeOptions: { type: Object as PropType<$BadgeProps>, default: undefined },
    /** 主题色 */
    themeColor: { type: String as PropType<$AllColorStr>, default: '#3c9cff' },
    /** 日期字体颜色 */
    dayColor: { type: String as PropType<$AllColorStr>, default: '#3c9cff' },
    /** 日期字体大小 */
    daySize: { type: String as PropType<$SizeUnitStr>, default: '18px' },
    /** 日期字体加粗 */
    dayBold: { type: Boolean, default: false },
    /** 农历字体颜色 */
    lunarColor: { type: String as PropType<$AllColorStr>, default: '#313131' },
    /** 农历字体大小 */
    lunarSize: { type: String as PropType<$SizeUnitStr>, default: '12px' },
    /** mode=range时，第一个日期底部的提示文字 */
    startText: { type: String, default: '开始' },
    /** mode=range时，最后一个日期底部的提示文字 */
    endText: { type: String, default: '结束' },
    /** 月份显示数据 */
    monthViewData: { type: Object as PropType<Record<number, $NewDate[]>>, default: undefined },
    /** 选中的日期数据 */
    selectedDayData: { type: Object as PropType<$NewDate>, default: undefined },
    /** 打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] */
    selected: { type: Array as PropType<$CalendarViewSelected[]>, default: () => [] },
    /** 是否显示农历 */
    lunar: { type: Boolean, default: false },
    /** 是否显示月份 */
    showMonth: { type: Boolean, default: false },
    /** 折叠状态 */
    foldStatus: { type: Boolean, default: false },
    /** 月份 */
    month: { type: [Number, String], default: null },
  });
  const emits = defineEmits<{
    (e: 'change', str: $NewDate): void;
  }>();

  /** 选择日期 */
  function choiceDate(weeks: $NewDate) {
    emits('change', weeks);
  }
</script>

<style lang="scss" scoped>
  .mxp-calendar-month {
    position: relative;

    .item-weeks-view {
      position: relative;
      display: flex;
      flex-direction: row;
      padding: 0 4px;

      .item-day-view {
        flex: 1;
      }
    }

    .calendar-month-bg {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .bg-text {
        font-size: 52px;
        font-weight: bold;
        /* #ifndef APP-NVUE */
        line-height: 1;
        color: #999999;
        text-align: center;
        opacity: 0.1;
        transform: scale(4);
        /* #endif */
      }
    }
  }
</style>
